<template>
  <div style="width: 100%;height: 100%;">
    <Echart
      :options="options"
      :id="id"
      height="100%"
      width="100%"
    ></Echart>
  </div>
</template>

<script>
  import Echart from '@/common/echart'
  export default {
    data () {
      return {
        options: {},
        COLORS: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83']
      };
    },
    components: {
      Echart,
    },
    props: {
      cdata: {
        type: Object,
        default: () => ({})
      },
      id: {
        type: String
      }
    },
    watch: {
      cdata: {
        handler (newData) {
          this.options = {
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: newData.xAxisList,
              top: "4%"
            },
            xAxis: {
              type: 'value',
            },
            yAxis: {
              type: 'category',
              data: newData.xAxisList
            },
            grid: {
              left: "12%",
              bottom: "15%",
              top: "15%",
              width: "80%"
            },
            series: [{
              data: newData.seriesList,
              type: 'bar',
              itemStyle: {
                normal:{
                  color: item => {
                    return this.COLORS[item.dataIndex]
                  }
                }
              },
            }]
          }
        },
        immediate: true,
        deep: true
      }
    }
  };
</script>

<style lang="scss" scoped>
</style>
